import React, { Component } from 'react';
import './app.css';
import ReactCSSTransitiongroup from 'react-addons-css-transition-group'


export default class One extends Component {
    constructor(){
        super();
        this.state = {
            list: []
        }
        this.add = this.add.bind(this);
    }

    add(){
        console.log("this:::",this);
        this.state.list.push(this.refs.todoVal.value);
       this.setState({
           list: this.state.list
       })
    }
    shan(index){
        this.state.list.splice(index,1);
        this.setState({
            list:this.state.list
        })
    }
    render() {
        let items = this.state.list.map((item,index)=>{
            return <li key={item}>  {item}
             <button onClick={()=>this.shan(index)}>X</button>
              </li>
        })
        return (
            <div>
                <input type="text" ref="todoVal" />
                <button onClick={this.add}> 提交</button>
                <ul>
                    <ReactCSSTransitiongroup
                        transitionName="reactAnim"
                        transitionEnterTimeout={500}
                        transitionLeaveTimeout={300} >
                        {items}

                    </ReactCSSTransitiongroup>
                   
                </ul>
            </div>
        )
    }
}
